<script>
  import AccountSaveUpdate from '@/components/store/account/save-update';
  import BossSaveUpdate from '@/components/store/boss/save-update';

  export default {
    layout: 'admin',
    components: {
      AccountSaveUpdate, BossSaveUpdate
    },
    data() {
      return {
        // 商店主键
        id: undefined,
        // 商店对象
        store: {
          // 基础数据
          storeForm: {
            // 主键
            id: undefined,
            // 业务主键
            businessId: undefined,
            // 名称
            name: undefined,
            // 省份名称
            addressProvinceName: undefined,
            // 城市名称
            addressCityName: undefined,
            // 区县名称
            addressDistrictName: undefined,
            // 街道名称
            addressStreetName: undefined,
            // 详细门牌号
            address: undefined,
            // 面积
            area: undefined,
            // 经营大类
            mainClass: undefined,
            // 经营大类名称
            mainClassName: '',
            // 经营小类
            subClass: undefined,
            // 经营小类名称
            subClassName: '',
            // 状态
            status: undefined
          },
          // 没有正在审核中的商店账户[true-没有 false-有]
          noAuditAccount: true,
          // 账户列表
          accountList: [
            // {
            //   // 主键
            //   id: undefined,
            //   // 账户类型[0-对公  1-对私]
            //   type: 0,
            //   // 姓名
            //   name: undefined,
            //   // 身份证号
            //   idCard: undefined,
            //   // 企业名称
            //   enterpriseName: undefined,
            //   // 企业社会统一信用代码
            //   enterpriseNo: undefined,
            //   // 银行卡号
            //   bankNo: undefined,
            //   // 银行名称
            //   bankName: undefined,
            //   // 支行名称
            //   bankBranchName: undefined,
            //   // 银行预留手机号
            //   bankMobile: undefined,
            //   // 银行所在城市名称
            //   bankCityName: undefined
            // }
          ],
          // 没有正在审核中的商店老板[true-没有 false-有]
          noAuditBoss: true,
          // 老板列表
          bossList: [
            // {
            //   // 主键
            //   id: undefined,
            //   // 名称
            //   name: undefined,
            //   // 性别[0-男 1-女]
            //   gender: undefined,
            //   // 身份证号
            //   idCard: undefined,
            //   // 手机号
            //   mobile: undefined
            // }
          ],
          // 商店版本记录
          historyFinishList: [],
          // 商店审核记录列表
          auditGroupList: [],
        },
        // 正在显示的商店账户下标
        showAccountIndex: 0,
        // 正在显示的商店老板下标
        showBossIndex: 0,
        // 数据加载状态[false-不加载 true-加载]
        dataLoad: false,
        // 按钮状态[false-可用 true-禁用]
        buttonLoad: false,
        // 页面模块列表
        module: {
          // 历史审核记录模块
          historyAuditM: {
            // 模块名称
            name: '历史审核记录',
            // 模块ref名称
            refName: 'historyAuditRef',
            // 展开状态[true-展开 false-收缩]
            isExpand: true,
          },
          // 基础信息模块
          storeM: {
            name: '基础信息',
            refName: 'storeRef',
            isExpand: true,
          },
          // 账户信息模块
          accountM: {
            name: '账户信息',
            refName: 'accountRef',
            isExpand: true,
          },
          // 老板信息模块
          bossM: {
            name: '老板信息',
            refName: 'bossRef',
            isExpand: true,
          }
        },
        // 商店历史审核通过版本主键
        historyStoreId: undefined,
        // 商店管理页面检索参数
        prePageSearchForm: '',
      }
    },
    computed: {
      // 当前正在显示的商店账户
      accountForm() {
        const accountForm = this.store.accountList[this.showAccountIndex];
        if (!accountForm) {
          return {};
        }
        return accountForm;
      },
      // 商店账户类型名称
      typeName() {
        const accountForm = this.accountForm;
        if (accountForm.type == null) {
          return '';
        }
        return accountForm.type === 0 ? '对公' : '对私';
      },
      // 当前正在显示的商店老板
      bossForm() {
        const bossForm = this.store.bossList[this.showBossIndex];
        if (!bossForm) {
          return {};
        }
        return bossForm;
      },
      // 商店老板性别名称
      genderName() {
        const bossForm = this.bossForm;
        if (bossForm.gender == null) {
          return '';
        }
        return bossForm.gender === 0 ? '男' : '女';
      }
    },
    filters: {
      /**
       * 商店账户类型名称映射
       * @param {number} value 账户类型值
       * @return {string} 账户类型名称
       */
      accountTypeFormat(value) {
        if (!value) {
          return '';
        }
        return value === 0 ? '对公' : '对私'
      },
      /**
       * 老板性别名称映射
       * @param value 老板性别值
       * @return {string} 老板性别名称
       */
      bossGenderFormat(value) {
        if (!value) {
          return '';
        }
        return value === 0 ? '男' : '女';
      }
    },
    created() {
      if (process.server) {
        return;
      }
      const params = this.$route.params;
      if (!params.id) {
        return this.$router.replace({ name: 'admin-store', params: { searchForm: this.prePageSearchForm }});
      }
      this.id = params.id;
      this.historyStoreId = params.id;
      // 记录上一个页面的参数
      this.prePageSearchForm = params.prePageSearchForm;
      // 获取商店详情
      this.getStoreDetail(params.id, true);
    },
    methods: {
      /**
       * 切换商店比较版本事件
       * @param {string} id 商店主键
       */
      changeStoreHandle(id) {
        this.showAccountIndex = 0;
        this.showBossIndex = 0;

        // 获取商店详情
        this.getStoreDetail(id, false);
      },
      /**
       * 获取商店详情接口
       * @param id      商店主键
       * @param isFirst 第一次请求标记[true-是 false-否]
       */
      getStoreDetail(id, isFirst) {
        this.dataLoad = true;
        this.$axios.$get('/store/detail', { params: { id, isFirst }})
          .then(({ data }) => {
            const storeDto = data.storeViewDto;
            const storeAccountList = data.storeAccountDtoList;
            const storeBossList = data.storeBossDtoList;
            const historyFinishList = data.historyFinishList;
            const auditGroupList = data.auditGroupList;
            const noAuditAccount = data.noAuditAccount;
            const noAuditBoss = data.noAuditBoss;

            const store = this.store;
            const storeForm = store.storeForm;

            for (let propKey in storeForm) {
              if (storeDto.hasOwnProperty(propKey)) {
                storeForm[propKey] = storeDto[propKey];
              }
            }
            store.accountList = storeAccountList;
            store.bossList = storeBossList;
            if (isFirst) {
              store.historyFinishList = historyFinishList;
              store.auditGroupList = auditGroupList;
            }
            store.noAuditAccount = noAuditAccount;
            store.noAuditBoss = noAuditBoss;
          })
          .catch(() => {})
          .finally(() => {
            this.dataLoad = false;
          })
      },
      /**
       * 页面滚动事件
       * @param {string} refName 标签ref名称
       */
      scrollHandle(refName) {
        const targetDiv = this.$refs[refName]
        let contentBoxDiv = this.$refs.contentBox.$el;
        // 获取元素距离顶部距离
        let top = targetDiv.offsetTop - contentBoxDiv.offsetTop;
        // 滚动到指定div
        window.scrollTo({
          top: top,
          behavior: "smooth",
        });
      },
      /**
       * 返回商店管理页事件
       */
      backPrePageHandle() {
        // 跳回管理页面
        this.$router.replace({ name: 'admin-store', params: { searchForm: this.prePageSearchForm }});
      },
      /**
       * 审核备注分割方法
       * @param auditRemark 审核备注
       * @return {string[]} 审核备注数组
       */
      auditRemarkSplit(auditRemark) {
        if (!auditRemark) {
          return [];
        }
        return auditRemark.split("\n");
      },
      /**
       * 打开商店账户新增/修改弹出框事件
       * @param {boolean} optType 操作类型[true-修改 false-添加]
       */
      openAccountSaveUpdateDialogHandle(optType) {
        let accountForm = undefined;
        if (optType) {
          accountForm = this.accountForm;
        }
        this.$refs.accountSaveUpdate.openDialog(optType, this.store.storeForm, accountForm);
      },
      /**
       * 删除商店账户操作
       */
      deleteAccountHandle() {
        const accountForm = this.accountForm;
        let name = accountForm.type === 0 ? accountForm.enterpriseName : accountForm.name
        this.$confirm(`您确定要删除【${name}】商店账户吗，是否继续？`, '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        })
        .then(() => {
          // 按钮禁用
          this.buttonLoad = true;

          return this.$axios.$delete('/store-account/delete', { params: { id: accountForm.id }});
        })
        .then(() => {
          this.notify('success', '操作成功', '删除商店账户成功');

          // 删除商店账户
          this.showAccountIndex -= 1;
          this.store.accountList = this.store.accountList.filter(account => account.id !== accountForm.id);
        })
        .catch(() => {})
        .finally(() => {
          // 按钮恢复
          this.buttonLoad = false;
        })
      },
      /**
       * 打开商店老板新增/修改弹出框事件
       * @param {boolean} optType 操作类型[true-修改 false-添加]
       */
      openBossSaveUpdateDialogHandle(optType) {
        let bossForm = undefined;
        if (optType) {
          bossForm = this.bossForm;
        }
        this.$refs.bossSaveUpdate.openDialog(optType, this.store.storeForm, bossForm);
      },
      /**
       * 删除商店老板操作
       */
      deleteBossHandle() {
        const bossForm = this.bossForm;
        this.$confirm(`您确定要删除【${bossForm.name}】商店老板吗，是否继续？`, '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        })
        .then(() => {
          // 按钮禁用
          this.buttonLoad = true;

          return this.$axios.$delete('/store-boss/delete', { params: { id: bossForm.id }});
        })
        .then(() => {
          this.notify('success', '操作成功', '删除商店老板成功');

          // 删除商店账户
          this.showAccountIndex -= 1;
          this.store.accountList = this.store.accountList.filter(account => account.id !== bossForm.id);
        })
        .catch(() => {})
        .finally(() => {
          // 按钮恢复
          this.buttonLoad = false;
        });
      },
      /**
       * 刷新页面数据事件
       */
      refreshHandle() {
        // 重新加载数据
        this.getStoreDetail(this.id, false);
      },
      /**
       * 获取el-tag类型方法
       * @param {number} status      状态
       * @param {number} auditStatus 审核状态
       */
      getTagType(status, auditStatus) {
        if (auditStatus === 0) {
          // 审核中
          return 'info';
        }
        if (status === 1 || auditStatus === 2) {
          /*
            status === 1：     禁用
            auditStatus === 2：审核拒绝
           */
          return 'danger';
        }
        return 'success';
      },
      /**
       * 修改商店账户状态事件
       * @param {number} status 最新状态值
       */
      updateAccountStatusHandle(status) {
        const accountForm = this.accountForm;

        let promise = Promise.resolve();
        if (status === 1) {
          promise = this.$confirm(
            `您确定要停用【${accountForm.name || accountForm.enterpriseName}】商店账户吗？`,
            '操作提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'danger'
            }
          )
        }
        promise.then(() => {
          // 按钮禁用
          this.buttonLoad = true;
          let body = {
            idList: [ accountForm.id ],
            status: status
          }
          return this.$axios.$post('/store-account/update/status', body);
        })
        .then(() => {
          const name = accountForm.name || accountForm.enterpriseName;
          const message = status === 0 ? `启用【${name}】商店账户成功` : `停用【${name}】商店账户成功`;
          this.notify('success', '操作成功', message)

          // 修改账户状态
          accountForm.status = status;
        })
        .catch(() => {})
        .finally(() => {
          // 按钮恢复使用
          this.buttonLoad = false;
        })
      },
      /**
       * 修改商店老板状态事件
       * @param {number} status 最新状态值
       */
      updateBossStatusHandle(status) {
        const bossForm = this.bossForm;

        let promise = Promise.resolve();
        if (status === 1) {
          promise = this.$confirm(
            `您确定要停用【${bossForm.name}】商店老板吗？`,
            '操作提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'danger'
            }
          )
        }
        promise.then(() => {
          // 按钮禁用
          this.buttonLoad = true;
          let body = {
            idList: [ bossForm.id ],
            status: status
          }
          return this.$axios.$post('/store-boss/update/status', body);
        })
          .then(() => {
            const message = status === 0 ? `启用【${bossForm.name}】商店老板成功` : `停用【${bossForm.name}】商店老板成功`;
            this.notify('success', '操作成功', message);
            // 修改老板状态
            bossForm.status = status;
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复使用
            this.buttonLoad = false;
          })
      }
    }


  }
</script>

<template>
  <div class="store-detail-page">
    <el-card :body-style="{ padding: '15px' }" class="fixed-box">
      <el-form size="small" inline label-width="100px" ref="storeForm">
        <el-form-item label="历史版本" label-width="85px" class="mb0">
          <el-select v-model="historyStoreId" @change="changeStoreHandle" class="history-select">
            <el-option
              v-for="finishStore in store.historyFinishList"
              :key="'history' + finishStore.id"
              :label="finishStore.createTime + ' 版本'"
              :value="finishStore.id">
              <span style="float: left">{{ finishStore.createTime }}</span>
              <span v-if="id === finishStore.id" style="float: right; color: #8492a6; font-size: 13px">
                当前版本
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="store.noAuditAccount && store.storeForm.id === id" class="mb0">
          <el-button type="success" icon="el-icon-plus" plain
                     @click="openAccountSaveUpdateDialogHandle(false)">添加账户</el-button>
        </el-form-item>
        <el-form-item v-if="store.noAuditBoss && store.storeForm.id === id" class="mb0">
          <el-button type="success" icon="el-icon-plus" plain
                     @click="openBossSaveUpdateDialogHandle(false)">添加老板</el-button>
        </el-form-item>
        <el-form-item class="mb0">
          <el-button :disabled="buttonLoad" size="small" @click="backPrePageHandle" class="back-btn">
            返 回
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row :gutter="10">
      <!-- 左侧 start -->
      <el-col :span="20"
              ref="contentBox"
              v-loading="dataLoad"
              element-loading-text="数据加载中..."
              element-loading-spinner="el-icon-loading"
              class="content-box">
        <div :ref="module.historyAuditM.refName" class="module-box">
          <span class="m-title">{{ module.historyAuditM.name }}</span>
          <span @click="module.historyAuditM.isExpand = !module.historyAuditM.isExpand" class="m-btn">
            {{ module.historyAuditM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <el-timeline v-if="module.historyAuditM.isExpand" class="audit-box">
            <el-timeline-item v-for="(auditGroup, index) in store.auditGroupList"
                              :key="'auditGroup' + index"
                              :timestamp="auditGroup.name"
                              placement="top"
                              color="#0bbd87">
              <el-card v-for="audit in auditGroup.list"
                       :key="'audit' + audit.id"
                       :body-style="{ padding: '10px' }"
                       class="audit">
                <div class="title">
                  {{ audit.status === 0 ? '通过' : '拒绝'}}
                </div>
                <div v-if="audit.auditRemark" class="auditRemark">
                  <div v-for="(remark, index) in auditRemarkSplit(audit.auditRemark)" :key="'auditRemark' + index">
                    {{ remark }}
                  </div>
                </div>
                <div class="user">
                  <span>{{ audit.createUser }}</span>
                  提交于
                  <span>{{ audit.createTime }}</span>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-collapse-transition>

        <div :ref="module.storeM.refName" class="module-box">
          <span class="m-title">{{ module.storeM.name }}</span>
          <span @click="module.storeM.isExpand = !module.storeM.isExpand" class="m-btn">
            {{ module.storeM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <el-form v-if="module.storeM.isExpand" size="mini" label-width="100px" ref="storeForm">
            <el-form-item label="商店名称">
              <el-input v-model="store.storeForm.name" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="商店地址">
              <div class="mb10">
                <el-input v-model="store.storeForm.addressProvinceName" readonly class="width20Percent">
                  <span slot="suffix">省</span>
                </el-input>
                <el-input v-model="store.storeForm.addressCityName" readonly class="width20Percent">
                  <span slot="suffix">市</span>
                </el-input>
                <el-input v-model="store.storeForm.addressDistrictName" readonly class="width20Percent">
                  <span slot="suffix">区/县</span>
                </el-input>
                <el-input v-model="store.storeForm.addressStreetName" readonly class="width20Percent">
                  <span slot="suffix">街道</span>
                </el-input>
              </div>
              <div>
                <el-input v-model="store.storeForm.address" readonly class="width30Percent"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="商店面积">
              <el-input v-model="store.storeForm.area" readonly class="width30Percent">
                <span slot="suffix">平米</span>
              </el-input>
            </el-form-item>
            <el-form-item label="经营大类">
              <el-input :value="store.storeForm.mainClassName" readonly class="width30Percent"></el-input>
            </el-form-item>
            <el-form-item label="经营小类">
              <el-input :value="store.storeForm.subClassName" readonly class="width30Percent"></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-transition>
        <div :ref="module.accountM.refName" class="module-box">
          <span class="m-title">{{ module.accountM.name }}</span>
          <span @click="module.accountM.isExpand = !module.accountM.isExpand" class="m-btn">
            {{ module.accountM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <div v-if="module.accountM.isExpand" class="account-box">
            <div class="account-list">
              <el-tag v-for="(account, index) in store.accountList"
                      :key="'account' + account.id"
                      @click="showAccountIndex = index"
                      :type="getTagType(account.status, account.auditStatus)"
                      :effect="showAccountIndex === index ? 'light' : 'plain'"
                      disable-transitions
                      class="account-tag">
                <span>{{ account.name || account.enterpriseName }}</span>
                <span class="default-status">{{ account.defaultStatus === 0 ? '默认' : '普通'}}</span>
              </el-tag>
            </div>
            <el-form  size="mini" label-width="100px" ref="accountForm">
              <el-form-item label="账户类型">
                <el-input :value="typeName" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item v-if="accountForm.type === 1" label="账户姓名">
                <el-input v-model="accountForm.name" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item v-if="accountForm.type === 1" label="身份证号">
                <el-input v-model="accountForm.idCard" readonly class="width30Percent">
                </el-input>
              </el-form-item>
              <el-form-item v-if="accountForm.type === 0" label="企业名称">
                <el-input v-model="accountForm.enterpriseName" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item v-if="accountForm.type === 0" label="社会统一信用代码">
                <el-input v-model="accountForm.enterpriseNo" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号">
                <el-input v-model="accountForm.bankNo" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="银行名称">
                <el-input v-model="accountForm.bankName" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="支行名称">
                <el-input v-model="accountForm.bankBranchName" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="预留手机号">
                <el-input v-model="accountForm.bankMobile" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="开户城市">
                <el-input v-model="accountForm.bankCityName" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="序号">
                <el-input v-model="accountForm.sort" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button v-if="accountForm.auditStatus === 1
                                  && accountForm.defaultStatus !== 0 && accountForm.status === 1"
                           type="success"
                           :disabled="buttonLoad"
                           icon="el-icon-thumb"
                           plain
                           @click="updateAccountStatusHandle(0)">
                  启用
                </el-button>
                <el-button v-if="accountForm.auditStatus === 1
                                  && accountForm.defaultStatus !== 0 && accountForm.status === 0"
                           type="warning"
                           :disabled="buttonLoad"
                           icon="el-icon-thumb"
                           plain
                           @click="updateAccountStatusHandle(1)">
                  停用
                </el-button>
                <el-button v-if="store.noAuditAccount && accountForm.defaultStatus !== 0"
                           type="primary"
                           icon="el-icon-edit" plain
                           @click="openAccountSaveUpdateDialogHandle(true)">
                  修改
                </el-button>
                <el-button v-if="accountForm.defaultStatus !== 0"
                           type="danger"
                           :disabled="buttonLoad"
                           icon="el-icon-delete" plain
                           @click="deleteAccountHandle">
                  删除
                </el-button>
                <div></div>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-transition>
        <div :ref="module.bossM.refName" class="module-box">
          <span class="m-title">{{ module.bossM.name }}</span>
          <span @click="module.bossM.isExpand = !module.bossM.isExpand" class="m-btn">
            {{ module.bossM.isExpand ? '收缩' : '展开' }}
          </span>
        </div>
        <el-collapse-transition>
          <div v-if="module.bossM.isExpand" class="boss-box">
            <div class="boss-list">
              <el-tag v-for="(boss, index) in store.bossList"
                      :key="'boss' + boss.id"
                      @click="showBossIndex = index"
                      :type="getTagType(boss.status, boss.auditStatus)"
                      :effect="showBossIndex === index ? 'light' : 'plain'"
                      disable-transitions
                      class="boss-tag">
                <span>{{ boss.name }}</span>
                <span class="default-status">{{ boss.defaultStatus === 0 ? '默认' : '普通'}}</span>
              </el-tag>
            </div>
            <el-form size="mini" label-width="100px" ref="bossForm">
              <el-form-item label="老板姓名">
                <el-input v-model="bossForm.name" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="老板性别">
                <el-input :value="genderName" readonly class="width30Percent">
                </el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input v-model="bossForm.idCard" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="bossForm.mobile" readonly class="width30Percent"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button v-if="bossForm.auditStatus === 1 && bossForm.defaultStatus !== 0 && bossForm.status === 1"
                           type="success"
                           :disabled="buttonLoad"
                           icon="el-icon-thumb"
                           plain
                           @click="updateBossStatusHandle(0)">
                  启用
                </el-button>
                <el-button v-if="bossForm.auditStatus === 1 && bossForm.defaultStatus !== 0 && bossForm.status === 0"
                           type="warning"
                           :disabled="buttonLoad"
                           icon="el-icon-thumb"
                           plain
                           @click="updateBossStatusHandle(1)">
                  停用
                </el-button>
                <el-button v-if="store.noAuditBoss && bossForm.defaultStatus !== 0" type="primary"
                           icon="el-icon-edit" plain
                           @click="openBossSaveUpdateDialogHandle(true)">
                  修改
                </el-button>
                <el-button v-if="bossForm.defaultStatus !== 0"
                           type="danger"
                           :disabled="buttonLoad"
                           icon="el-icon-delete" plain
                           @click="deleteBossHandle">
                  删除
                </el-button>
                <div></div>
              </el-form-item>
            </el-form>
          </div>

        </el-collapse-transition>
      </el-col>
      <!-- 左侧 end -->
      <!-- 右侧 start -->
      <el-col :span="4">
        <el-card :body-style="{ padding: '15px' }" class="nav-box">
          <div v-for="m in module" :key="'nav' + m.refName" @click="scrollHandle(m.refName)" class="nav-btn">
            {{ m.name }}
          </div>
        </el-card>
      </el-col>
      <!-- 右侧 end -->
    </el-row>

    <!-- 商店账户新增/修改弹出框 -->
    <AccountSaveUpdate @refresh="refreshHandle" ref="accountSaveUpdate" />

    <!-- 商店老板新增/修改弹出框 -->
    <BossSaveUpdate @refresh="refreshHandle" ref="bossSaveUpdate" />
  </div>
</template>

<style scoped>
  .store-detail-page .fixed-box {
    width: 83.6%;
    position: fixed;
    top: 110px;
    z-index: 9;
  }
  .store-detail-page .fixed-box .history-select {
    width: 300px;
  }
  .store-detail-page .content-box {
    margin-top: 75px;
  }
  .store-detail-page .content-box .module-box {
    background-color: #F2F6FC;
    border-radius: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
    line-height: 35px;
  }
  .store-detail-page .content-box .module-box .m-title {
    font-size: 18px;
    font-weight: bold;
  }
  .store-detail-page .content-box .module-box .m-btn {
    float: right;
    font-size: 14px;
    margin-right: 20px;
    cursor: pointer;
  }
  .store-detail-page .content-box .audit-box {
    margin-left: 10px;
    max-height: 300px;
    overflow-y: auto;
  }
  .store-detail-page .content-box .audit-box .audit {
    width: 50%;
    margin-top: 10px;
  }
  .store-detail-page .content-box .audit-box .audit .title {
    font-size: 16px;
    font-weight: bold;
  }
  .store-detail-page .content-box .audit-box .audit .auditRemark {
    font-size: 15px;
    margin-top: 5px;
    color: #f81313;
  }
  .store-detail-page .content-box .audit-box .audit .user {
    margin-top: 10px;
  }
  .store-detail-page .content-box .audit-box .audit .user span {
    font-size: 14px;
    color: #909399;
    margin-top: 5px;
  }
  .store-detail-page .content-box .account-box .account-list,
  .store-detail-page .content-box .boss-box .boss-list {
    margin-bottom: 10px;
  }
  .store-detail-page .content-box .account-box .account-list .account-tag,
  .store-detail-page .content-box .boss-box .boss-list .boss-tag {
    margin-left: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .store-detail-page .content-box .account-box .account-list .account-tag .default-status,
  .store-detail-page .content-box .boss-box .boss-list .boss-tag .default-status {
    color: #c0c4cc;
  }
  .store-detail-page .nav-box {
    width: 205px;
    position: fixed;
    top: 185px;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
  .store-detail-page .nav-box .nav-btn {
    line-height: 30px;
    font-weight: bold;
    cursor: pointer;
  }
  .store-detail-page .nav-box .nav-btn:hover {
    background-color: #F2F6FC;
  }
</style>

<style scoped>
  .store-detail-page .width20Percent {
    width: 20%;
  }
  .store-detail-page .width30Percent {
    width: 30%;
  }
  .store-detail-page .width50Percent {
    width: 50%;
  }
  .store-detail-page .mb10 {
    margin-bottom: 10px;
  }
  .store-detail-page .mb0 {
    margin-bottom: 0 !important;
  }
</style>
